<template>
	<div class="content">
		<div class="content_title">
			<p>我的学习</p>
		</div>
		<div class="content_bottom">
			<div class="content_bottom_top">
				<li style="cursor: default;">
					<img src="../../assets/user/px.png" alt="">
					<div>
						<p>已参加培训</p>
						<p>{{dataList.list.trainingTimes}}次</p>
					</div>
				</li>
				<li style="cursor: default;">
					<img src="../../assets/user/jf.png" alt="">
					<div>
						<p>已获得积分</p>
						<p>{{dataList.list.sumPoints}}</p>
					</div>
				</li>
			</div>
			<div class="content_bottom_title">
				<p class="s"></p>
				<p>我的培训班</p>
			</div>
			<div>
				 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				    <el-tab-pane label="进行中" name="first">
						<div class="science_box">
							<!-- <science v-for="(science,i) in dataList.list.presentTrainings" :type="2" :status="1" :list="science" :study="1"></science> -->
							<div v-for="(science,i) in dataList.list.presentTrainings" class="sclence isuser">
								<img :src="'http:'+science.photoUrl" alt="">
								<div class="sclence_r">
									<p class="snp1">{{science.trainingName}}</p>
									<span>{{science.trainingStartTime}} - {{science.trainingEndTime}}</span>
									<!-- v-if="science.enrollStatus == 'learning'||science.enrollStatus == 'enroll'" -->
									<button  class="btn2" @click="goDetail('jx',science)">继续学习</button>
								</div>
							</div>
						</div>
					</el-tab-pane>
				    <el-tab-pane label="已完成" name="second">
						<div class="science_box">
							<div v-for="(sciences,i) in dataList.list.completeTrainings" class="sclence isuser">
								<img src="@/assets/goods.png" alt="">
								<div class="sclence_r">
									<p class="snp1">{{sciences.trainingName}}</p>
									<span>{{sciences.trainingName}} - {{sciences.registerEndTime}}</span>
									<button v-if="sciences.enrollStatus == 'overEnroll'" class="btn3">已结束</button>
								</div>
							</div>
						</div>
					</el-tab-pane>
				  </el-tabs>
			</div>
			<!-- this.presentTrainings = presentTrainings -->
			<!-- this.completeTrainings = completeTrainings -->
			<div class="content_bottom_title">
				<p class="s"></p>
				<p>辅修课程（线上）</p>
			</div>
			<div class="classRoom_box">
				<!-- <classRoom v-for="(classRoom,i) in dataList.list.onlineClassList" :list="classRoom"></classRoom> -->
				
				<div  v-for="(classRoom,i) in dataList.list.onlineClassList" @click="goclassDetail(classRoom.classUuid)" class="isuser">
					<img :src="classRoom.coverImage" alt="">
					<p class="snp1">{{classRoom.className}}</p>
					<li>
						<!-- <span>主讲人：{{classRoom.classManager}}</span> -->
						<span>{{classRoom.classStatus}}人学习</span>
					</li>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script setup>
	import {myStudy} from "../../api/home.js";
	import science from '../../components/science.vue'
	import classRoom from '../../components/classRoom1.vue'
	import { ref ,reactive,onBeforeMount} from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const activeName = ref('first')
	const dataList = reactive({
		list:''
	})
	onBeforeMount(()=> {
		getList()
	})
	
	const getList = ()=> {
		var data = {
			params: localStorage.getItem('userUuid')
		}
		myStudy(data).then(res=> {
			dataList.list = res.data
		})
	}
	const goclassDetail = (id)=> {
		router.push({
			path:'/classDetail',
			query:{id}
		})
	}
	
	const goDetail = (name,list) => {
		if(name == 'baoming'){
			router.push({
				path:'/apply',
				query:{type:1,id:list.trainingUuid}
			})
		}else if(name == 'jx'){
			router.push({
				path:'/apply',
				query:{type:2,id:list.trainingUuid}
			})
		}else{
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 910px;
		margin-left: 30px;
		&_title{
			width: 100%;
			border-bottom: 1px solid #D9D9D9;
			p{
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}
			
		}
		&_bottom{
			margin-top: 30px;
			&_top{
				width: 900px;
				height: 120px;
				background: #11918E;
				border-radius: 10px 10px 10px 10px;
				display: flex;
				padding: 20px;
				li{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					img{
						width: 80px;
						height: 80px;
						margin-right: 20px;
					}
					div{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 60px;
						p{
							font-size: 18px;
							font-weight: 600;
							color: #FFFFFF;
							text-align: center;
						}
					}
					
				}
				li:last-child{
					border-left: 1px solid rgba(255,255,255,0.2);
				}
			}
			&_title{
				display: flex;
				align-items: center;
				margin-top: 30px;
				.s{
					width: 2px;
					height: 22px;
					background: #11918E;
					margin-top: 4px;
					margin-right: 10px;
				}
				p{
					font-size: 24px;
					font-weight: 600;
					color: #11918E;
				}
			}
		}
	}
	.sclence{
		display: flex;
		margin-top: 30px;
		width: 555px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid rgba(17,145,142,0.1);
		padding: 15px;
		img{
			width: 162px;
			height: 108px;
			margin-right: 15px;
		}
		&_r{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			button{
				width: 92px;
				height: 33px;
				border-radius: 5px;
				font-size: 16px;
				font-weight: 600;
				color: #FFFFFF;
			}
			.btn1{
				background-color: #11918E;
			}
			.btn2{
				background-color: #69A800;
			}
			.btn3{
				background-color: #EDEDED;
				color: #B3B3B3;
			}
			// p{
			// 	width: 340px;
			// }
			span{
				
			}
		}
	}
	.isuser{
		width: 435px;
	}
	.science_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.classRoom_box{
		display: flex;
		flex-wrap: wrap;
		.isuser{
			width: 282px;
			height: 276px;
			margin-right: 30px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17,145,142,0.1);
			margin-top: 30px;
			img{
				width: 280px;
				height: 186px;
			}
			p{
				width: 230px;
				margin: 15px;
			}
			li{
				width: 230px;
				margin: 15px;	
				display: flex;
				justify-content: space-between;
			}
		}
		.isuser:nth-of-type(3n+0) {margin-right: 0;}
	}
	:deep(.is-active){
			color: #11918E!important;
		}
		:deep(.el-tabs__item):hover{
				color: #11918E;
			}
		:deep(.el-tabs__active-bar){
			background-color: #11918E;
		}
</style> 